<template>
  <p-modal
    :visible="visible"
    :title="title"
    :mask-closable="false"
    :destroy-on-close="true"
    :body-style="{
      height: '460px',
    }"
    width="600px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="title-info title-info_top">模板信息</div>
    <p-table
      row-key="templateName"
      :columns="columns"
      :row-selection="rowSelection"
      :scroll="{ y: '120px' }"
      bordered
      :pagination="false"
      :data-source="dataSource"
    >
      <template slot="templateName" slot-scope="text">
        <p-icon type="delete" @click="handleDelete(text)" />
      </template>
    </p-table>

    <div class="title-info">模板明细</div>
    <p-table
      row-key="id"
      :columns="columnsDetail"
      :scroll="{ y: '120px' }"
      bordered
      :pagination="false"
      :data-source="dataSourceDetail"
    />
  </p-modal>
</template>

<script>
import { getTemplate, deleteSaveTemplate } from '@/api/plan';

export default {
  props: {
    title: {
      type: String,
      default: '选择模板',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [String, Number],
      default: undefined,
    },
    salesOrganization: {
      type: String,
      default: '',
    },
    pageType: {
      type: String,
      default: 'BP',
    },
  },
  data() {
    return {
      rowSelection: {
        selectedRowKeys: [],
        type: 'radio',
        onChange(selectedRowKeys) {
          this.selectedRowKeys = selectedRowKeys;
          console.log('selectedRowKeys: ', selectedRowKeys);
        },
      },
      planSalesMap: {},
      dataSource: [],
    };
  },
  computed: {
    dataSourceDetail() {
      return this.planSalesMap[this.rowSelection.selectedRowKeys[0]] || [];
    },
    columns() {
      return [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '模板名称',
          dataIndex: 'templateName',
        },
        {
          align: 'center',
          title: '操作',
          dataIndex: 'templateName',
          scopedSlots: { customRender: 'templateName' },
        },
      ];
    },
    columnsDetail() {
      return [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '销售组',
          dataIndex: 'salesGroupName',
          width: '32%',
        },
        {
          align: 'center',
          title: '销售责任人',
          dataIndex: 'responsibleName',
          width: '32%',
        },
        {
          align: 'center',
          title: 'KAPM组',
          dataIndex: 'kapmGroupName',
        },
      ];
    },
  },
  watch: {
    visible: {
      handler(val) {
        val && this.getTemplate();
      },
    },
  },
  methods: {
    async handleDelete(val) {
      try {
        await this.$confirm(`该操作将删除模板 ${val} ，是否确认？`);
        await deleteSaveTemplate([val]);
        // const index = this.dataSource.findIndex(
        //   (item) => item.templateName === val
        // );
        // if (index > -1) {
        //   this.dataSource.splice(index, 1);
        this.getTemplate();
        this.$message.success('删除成功');
        this.rowSelectionMixin.selectedRowKeys = [];
        // }
      } catch (error) {
        // console.log('error: ', error);
      }
    },
    async getTemplate() {
      const result = await getTemplate({
        salesOrganization: this.salesOrganization,
        type: this.pageType,
      });
      this.planSalesMap = result?.data?.data?.planSalesMap || {};
      this.dataSource = Object.keys(this.planSalesMap).map((item) => {
        return {
          templateName: item,
        };
      });
    },
    handleCancel() {
      this.$emit('update:visible', false);
      this.rowSelection.selectedRowKeys = [];
    },
    handleOk() {
      const ids = this.rowSelection.selectedRowKeys;
      if (!ids.length) {
        this.$message.error('请选择模板！');
        return;
      }
      this.$emit('change', this.planSalesMap[ids[0]]);
      this.handleCancel();
    },
  },
};
</script>

<style lang="less" scoped>
.title-info {
  margin: 10px 0;
}
.title-info_top {
  margin-top: 0;
}
</style>
